<template>
  <div class="layout">
    <div class="grid-container">
      <div class="grid-item">1</div>
      <router-link to="/pay">
        <div class="grid-item">2</div>
      </router-link>

      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.layout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
}
.grid-container {
  width: 85vw;

  display: grid;
  place-items: center; /* 水平和垂直居中 */
  grid-template-columns: repeat(4, 1fr); /* 创建4列，每列宽度相等 */
  grid-template-rows: repeat(3, 1fr); /* 创建3行，每行高度相等 */
  gap: 40px 10px; /* 在格子之间添加间距 */
}

.grid-item {
  width: 400px;
  height: 280px;
  background-color: #f1f1f1; /* 设置格子背景色 */

  border: 1px solid #ccc; /* 边框 */
}
.grid-item:nth-child(1) {
  background-color: #029d9f; /* 设置格子背景色 */

  border: 1px solid #ccc; /* 边框 */
}
</style>
